<template>
	<div class="app-container">
		<el-form :model="form" :rules="rules" ref="queryRef" :inline="true" label-width="106px">
			<div class="bgWhite radius8 pb30">
				<div class=" fb fs16 border-bottom pl30 line-64">
					查看历史价格
				</div>
				<div class="plr30 pt25 pb25 flex col-center row-between">					
					<el-form-item label="选择日期" prop="time">
						<el-date-picker style="width: 312px;" 
						v-model="queryParams.time" 
						value-format="YYYY-MM-DD"
						type="daterange"
						range-separator="至"
						start-placeholder="请选择开始时间"
						end-placeholder="请选择结束时间"
						placeholder="" size="large"/>
					</el-form-item>
					<div class="flex col-center row-end" >
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</div>
				<div class="plr30 pb20">
					<div class="plr30 pt30 pb30 radius8" style="box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);">
						<div class="" id="my_bar_chart" style="height: 420px;"></div>
					</div>
				</div>
				<div class="mb20 pl30 border-bottom pb20 pr30 mt30 flex col-center row-between">
					<div>
						<span class="fb">原料列表</span>
					</div>
					<el-button type="defaultBtn" @click="historyListExport" style="height: 32px;width: 70px;">
						导出
					</el-button>
				</div>
				<div class="p20">
					<el-table :data="list" style="width: 100%;text-align: center;"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }"
						>
						<el-table-column prop="materialName" label="原材料名称" />
						<el-table-column prop="materialId" label="原材料ID" />
						<el-table-column prop="yearMonth" label="时间"/>
						<el-table-column prop="latestPrice" label="最新价格（元/吨）" />
					</el-table>
				</div>
			</div>
		</el-form>
		
	</div>
</template>
<script setup name="addCustomer">
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_crop_category, //作物类别
		bus_common_target, //常见靶标
		bus_common_month,//常见发生月份
	} =
	proxy.useDict(
		"bus_crop_category",
		"bus_common_target",
		"bus_common_month"
		);
</script>
<script>
	import {
		historyList
	} from "@/api/business/cost";
	import {
		resetForm,
	} from '@/utils/ruoyi'//重置
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				queryParams:{
					materialPriceId:'',
					time:[]
				},
				list:[],
				rules: {
					cropName: [{
						required: true,
						message: '请输入作物名称',
						trigger: 'blur'
					}],
					commonTarget: [{
						required: true,
						message: '请选择常见靶标',
						trigger: 'change'
					}],
					commonOccurMonth1: [{
						required: true,
						message: '请选择常见发生月份',
						trigger: 'change'
					}],
					commonRegion1: [{
						required: true,
						message: '请选择常见发生区域',
						trigger: 'change'
					}],
				},
				address: [],
				timeArr:[],
				priceArr:[]
			}
		},
		created() {
			let that = this
			this.queryParams.materialPriceId = this.$route.query.id ? this.$route.query.id : ''
			this.getList()
			
		},
		methods: {
			init() {
				this.barChart.setOption({
					tooltip: {
						trigger: 'item',
						show: true //是否显示提示框
					},
					title: {
						textStyle: {
							color: "#333", // 标题颜色
							fontSize: 16, // 默认值：18
							fontWeight: "bold" // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
						},
					},
					grid: {
						left: "40px",
						right: "10px",
						bottom: "30px",
						// width:"24px"//柱状图宽度
					},
					xAxis: {
						show: true,
						axisTick: {
							show: false,
							length: 20 // 竖线的长度
						},
						data: this.timeArr
					},
					yAxis: {
						axisLabel: {
							show: true
						}
					},
					series: [
						{
							type: 'line',
							color:'rgba(77, 172, 177, 1)',
							animation: true, //动画的缓动方式
						  // animationEasing: "cubicOut", //动画的缓动方式
						  animationDuration: 1000, //持续时间
						  smooth: true, // smooth 折线图的线 true: 曲线; false: 直线(默认)
						  data: this.priceArr,
						  symbolSize: 5, // 设置拐点小圆点大小
						  // markPoint: {
						  //   symbol: "roundRect", // 设置拐点小圆点
						  // },
						  // 选中高亮
						  emphasis: {
							focus: "series",
						  },
						},
					]
				});
			},
			closePage() {
				this.$tab.closePage();
			},
			//搜索
			handleQuery(){
				this.queryParams.startTime = this.queryParams.time.length > 0 ? this.queryParams.time[0]+' '+'00:00:00' : ''
				this.queryParams.endTime = this.queryParams.time.length > 0 ? this.queryParams.time[1]+' '+'23:59:59' : ''
				this.getList()
			},
			// 重置
			resetQuery() {
				this.queryParams.time = []
				this.handleQuery()
			},
			// 详情
			getList() {
				historyList(this.queryParams).then(res => {
					this.list = res.data
					let a = []
					let b = []
					for(let key in this.list){
						a.push(this.list[key].latestPrice)
						b.push(this.list[key].yearMonth)
					}
					this.priceArr = a
					this.timeArr = b
					setTimeout(()=>{
						this.barChart = echarts.init(document.getElementById("my_bar_chart"));
						this.init();
					},200)
				})
			},
			//导出
			historyListExport(){
				this.download(
				  "/rawmaterial_price_history/importListData",
				  {
				    ...this.queryParams,
				  },
				  `history_price_${new Date().getTime()}.xlsx`
				);
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>